﻿<html>

<head>
  <meta charset="utf-8">
  <title>enmity_relative</title>
  <link rel="stylesheet" href="css/enmity.css">
</head>

<body id="enmity" v-class="resize-handle: !locked">

  <!-- outer -->
  <div class="outer {{hide ? 'hide' : ''}}">
    <!-- innner -->
    <div v-if="updated" class="inner {{target.type == undefined 2 ? 'hide' : ''}}">
      <div class="background"></div>

      <!-- Target -->
      <div id="target">
        <!-- Target Name area-->
        <div class="box">
          <div class="gauge {{target | hpcolor}}" style="width: {{target.HPPercent}}%"></div>
          <div class="name">
            <span class="header">ターゲット: </span>
            <span class="value">{{target.Name}}</span>
          </div>
        </div>
        <!-- HP and Gauge area-->
        <div>
          <span class="header">HP: </span>
          <span class="value">{{target.HPPercent}}%&emsp;({{target.CurrentHP.toLocaleString()}}/{{target.MaxHP.toLocaleString()}})</span>
        </div>
        <!-- Time-to-Death and Distance area -->
        <div>
          <span class="header">Time to Death: </span>
          <span class="value">{{target.TimeToDeath}}</span>
          <div style="float: right">
            <span class="header">距離: </span>
            <span class="value">{{target.Distance}}m ({{target.EffectiveDistance}}m)</span>
          </div>
        </div>
      </div>
      <!-- end of Target -->

      <!-- Enmity Entries (敵視情報) -->
      <div id="entries" class="box {{target.type != 2 ? 'hide' : ''}}" v-repeat="e: entries">
        <!-- Name -->
        <div class="content">
          <span class="name {{e.isMe ? 'me' : '' }}">{{$index + 1}}.{{e | you}}</span>
          <span class="enmity">{{e.RelativeEnmityString}}</span>
        </div>
        <!-- Gauge -->
        <div class="gauge {{e | jobclass}}" style="width: {{e.HateRate}}%"></div>
      </div>
      <!-- end of Enmity Entries -->

    </div>
    <!-- end of inner -->
  </div>
  <!-- end of outer -->

  <!-- load js -->
  <script src="js/vue-0.12.7.min.js"></script>
  <script src="js/enmity.js"></script>

  <!-- FOR DEMO/DEBUG USE -->
  <!--
  <script src="js/demodata.js"></script>
  <script>Demo(enmity);</script>
  -->
</body>

</html>